/**
 * Created by yyl on 2018/11/21.
 * 自定义 多选框
 */
import React from 'react';
import { Icon } from 'antd';

export default class CheckBox extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            data: this.props.data,
        };
    }

    static defaultProps = {
        canCheck: true, //判断是否可选，默认可选
        disabled: false, //是否可选，仅用于展示(置灰-放上去不会高亮)，默认false 可选
        type: true, // 指定是单选还是多选，默认多选
    }

    componentWillReceiveProps(nextProps) {
        if (this.props.data != nextProps.data) {
            this.setState({ data: nextProps.data });
        }
    }

    render() {
        let data = this.state.data;
        let disabled = this.props.disabled;
        let type = this.props.type;
        let that = this;

        let className = "";
        return (
            <div className="checkbox-ul">
                <ul>
                    {
                        data.map((item, index) => {
                            if (disabled) {
                                if (item.state == true) {
                                    className = "checkbox-li disabled checked";
                                } else {
                                    className = "checkbox-li disabled";
                                }
                            } else if (item.state == true) {
                                className = "checkbox-li checked";
                            } else {
                                className = "checkbox-li";
                            }

                            return (
                                <li onClick={type ? that._CheckBox.bind(that, item, data) : that._CheckRadio.bind(this, item, data)} key={index}
                                    className={className}>{item.text && (item.text).length > 10 ? (item.text).substr(0, 10).concat('…') : item.text}
                                    <span className="icon-span"><Icon type="check" /></span>
                                </li>
                            )
                        })
                    }
                </ul>
            </div>
        )
    }

    //多选
    _CheckBox = (item, data) => {
        if (!this.props.disabled) {
            if (item.state == true) {
                item.state = false;
            } else {
                item.state = true;
            }
            this.setState({ data: data });
            this.props.callBack(item, data);
        }
    }

    //单选
    _CheckRadio = (item, data) => {
        if (!this.props.disabled) {
            //判断是否有选中项
            data.forEach(function (d) {
                if (d.text != item.text && d.state == true) {
                    d.state = false;
                }
            });

            if (item.state && item.state == true) {
                item.state = false;
            } else {
                item.state = true;
            }
            this.setState({ data: data });
            this.props.callBack(item, data);
        }
    }
}